<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生jsonp</title>
</head>
<body>
    <button>jsonp</button>
    <p></p>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            //1. 创建script标签
            let script = document.createElement('script');

            //2. 创建回调函数，接受响应体(要放到全局，因为script标签是放在body中的)
            function callback(data){
                console.log(data);
            }
            // 3. 修改script标签的 src属性
            script.src = 'http://127.0.0.1/jsonp?cb=callback'
            // 4. 将script标签追加到页面
            document.body.appendChild(script);
        }
        //2. 创建回调函数，接受响应体(要放到全局，因为script标签是放在body中的)
        function callback(data){
            console.log(data);
            document.querySelector('p').innerHTML = data;
        }

        /**
         * 跨域核心
         * 1. 浏览器通过创建script标签发送请求
         * 2. 服务器返回 【函数的调用字符串】
         * 
         * 
         */

        
    </script>
</body>
</html>